import React, {useState} from 'react';
import WallpaperObject from "../../components/WallpaperObject";
import {WallpaperListType} from "./page";
import {Flex, Pagination, Row, Col} from "antd";

interface WallpaperSectorProps {
    wallpapers: WallpaperListType
}
const WallpaperSector: React.FC<WallpaperSectorProps> = ({ wallpapers}) => {
    return (
        <Flex align={"center"} vertical style={{flex:"1"}} className={"wallpaper-sector"}>
            <div style={{ width: "100%" }}>
                {Array.from({ length: Math.ceil(wallpapers.list.length / 3) }, (_, rowIndex) => (
                    <Row key={rowIndex} gutter={[16, 16]}>
                        {Array.from({ length: 3 }, (_, colIndex) => {
                            const index = rowIndex * 3 + colIndex;
                            return index < wallpapers.list.length ? (
                                <Col key={colIndex} span={8}>
                                    <WallpaperObject wallpaper={wallpapers.list[index]} />
                                </Col>
                            ) : null;
                        })}
                    </Row>
                ))}
            </div>
        </Flex>
    );
};
export default WallpaperSector;